<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>组件props</h1>
    <hr>
    <!-- <child :count="count" msg="abc" class="box"></child> -->
    <child :count="10" msg="abc" class="box"></child>
  </div>

  <script src="../Vue.js"></script>

  <script>
    const { createApp } = Vue;

    const Child = {
      // 子组件如果没有接受父组件传进来的属性，那么这个属性就会被加到子组件的根元素上面
      // 这个就叫做 "透传 attribute"

      // "透传 attribute"用的最多的是第三方插件(ui组件库)
      // 给子组件的根元素传入类名，从而改变它的样式
      // props: ["count"],

      // props还可以用对象来接受
      props: {
        count: Number,
        msg: String
      },
      template: `
        <div>这是子组件 - {{count}}</div>
      `
    }
    
    const app = createApp({
      data() {
        return {
          count: 10
        }
      },
      methods: {},
      components: {
        Child
      }
    })

    app.mount("#app")
  </script>
</body>
</html>